<!DOCTYPE html>
<html style="overflow: hidden;">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
		<title>数据详情</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/detail_R.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
		<link rel="stylesheet" type="text/css" href="css/iosSelect.css" />
		<style>
			/*此处必须让这些元素overflow*/
			
			#datas,
			.info_nav,
			#btn_base,
			.echarts_content {
				overflow: hidden;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #21202d;
			}
			
			.swiper-pagination-fraction,
			.swiper-pagination-custom,
			.swiper-container-horizontal>.swiper-pagination-bullets {
				bottom: 0px;
			}
			
			.hui-wrap .E_switch .switch_Container {
				width: 100%;
				padding: 0;
			}
			
			.Contrast {
				display: inline-block;
				height: 30px;
			}
		</style>
	</head>

	<body style=" background: #21202d;">
		<div id="datas" class="hui-wrap">
			<div style="height: 22px;background: #464646;"></div>
			<!--top部分-->
			<div class="info_nav">
				<div id="hui-back"></div>
				<h2 class="base_name title-txt">金山西瓜基地</h2>
				<!-- <div class="data_Contrast" onclick="data_DB();">对比</div> -->
			</div>
			<div style="height: 11vh;">
				<button type="button" class="hui-button hui-button-large" id="btn_base" style="position: relative;">
					<i style="position: absolute; left: 14px;font-size: 24px;" class="hui-icons hui-icons-down"></i>
					<p>切换基地指标</p>
				</button>
				<!--日 周 月 年 切换-->
				<div style="height: 3px; width: 100%; background: #828998;"></div>

				<div class="E_switch">

					<!--<div style="height: 2px; width: 100%; background: #3f4251;"></div>-->

				</div>

			</div>

			<div class="swiper-container" style="height: 77vh;">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="height: 77vh;">
						<div class="title_container" style="height: 3vh; text-align: left; display: flex;">
							<p id="name_unit" style="color: #fff;flex-grow:1; padding-left: 15px;"></p>
							<b class="Contrast" style="flex-grow:1;text-align: right; padding-right: 15px; color: #fff;">比较</b>

						</div>
						<div id="chart_L" style="width: 100%;height: 74vh; box-sizing: border-box; padding-bottom: 10px;">

						</div>
					</div>
					<div class="swiper-slide" style="height: 77vh;">
						<div class="YMD_more" style="">
							<span class="time" style="">时</span>
							<span class="day active" style="">日</span>
							<span class="week" style="">周</span>
							<span class="month" style="">月</span>
							<span class="season" style="">季</span>
							<span class="year" style="">年</span>
							<b class="more" style="">更多</b>
							<!--<b class="Contrast" style="">比较</b>-->
						</div>
						<div class="switch_Container" style="width: 100%; position: absolute; display: none;">
							<div class='swipe day_Time' style="background: #828998;height: 35px;">
								<div style="width: 100%; height: 100%; display: flex;">
									<div id="startSelectDate" style="flex-grow: 6;box-sizing: border-box; padding: 6px;">
										<em class="pc-box" style="display: inline-block; width: 100%; text-align: center; background: #f4f4f4;border-radius: 4px; font-size: 14px;">
											<span data-year="" data-month="" data-date="" id="startShowDate">点击选择开始时间</span>
										</em>
									</div>
									<span style="flex-grow: 1; line-height: 35px; text-align: center;">至</span>
									<div id="endSelectDate" style="flex-grow: 6; box-sizing: border-box; padding: 6px;">
										<em class="pc-box" style="display: inline-block; width: 100%; text-align: center; background: #f4f4f4;border-radius: 4px; font-size: 14px;">
											<span data-year="" data-month="" data-date="" id="endShowDate">点击选择结束时间</span>
										</em>
									</div>
								</div>
							</div>
						</div>
						<div class="title_container" style="height: 3vh;">
							<p id="name_unit" style="color: #fff; text-align: left; padding-left: 15px;"></p>
						</div>

						<div id="chart_K" style="width: 100%;height: 70vh; box-sizing: border-box; padding-bottom: 20px;">

						</div>
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>

		</div>

		<script src="js/func/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/iosSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/hui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/hui-picker.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/my.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

			var targetcode = getValue("targetcode"); //指标类型编号
			var tName = getValue("name");
			var tUnit = getValue("unit"); //指标单位
			var Sensor_Base = getValue("base"); //从首页进来的基地ID
			var Sensor_Name = getValue("sensorN"); //从首页进来的基地名字
			var LineNum = 1; // 判断是否需要重置折线图
			
			hui(".title-txt").html(tName);
			hui('#btn_base p').html(Sensor_Name + ' ' + tName);
			hui('#name_unit').html(tName + '统计');
			
			var Id_Contrast = [];

			function removeStorage() {
				localStorage.removeItem('ID_Contrast')
			}
			// removeStorage()
			//点击添加对比按钮
			hui('.Contrast').click(function() {
				
				if (localStorage.hasOwnProperty('ID_Contrast')) {
					if(JSON.parse(localStorage.getItem('ID_Contrast')).length == 5){
						hui.alert('最多添加五条对比数据!', '确定', function() {
							return false;
						})
						return false;
					}
					var flag = 0;
					ID_Contrast = JSON.parse(localStorage.getItem('ID_Contrast'));
					$.each(ID_Contrast, function(index, value) {
						if(value.targetcode == targetcode){
							flag = 1;
							alert('请勿添加重复数据！');
						}
					})
					if(flag == 0){
						Id_Contrast.push({targetcode: targetcode, tName: tName, tUnit: tUnit});
						localStorage.setItem('ID_Contrast', JSON.stringify(Id_Contrast));
						hui.iconToast('添加成功', 'success');
					}
				} else { 
					Id_Contrast.push({targetcode: targetcode, tName: tName, tUnit: tUnit})
					localStorage.setItem('ID_Contrast', JSON.stringify(Id_Contrast))
					hui.iconToast('添加成功', 'success');
				}

			})



			//时间选择
			$('.more').click(function() {
				if ($('.switch_Container').is(':hidden')) {
					$('.switch_Container').show();
					$('#chart_K').css({
						'height': '68vh'
					})
				} else {
					$('.switch_Container').hide();
				}
			})
			var startSelectDateDom = $('#startSelectDate');
			var startShowDateDom = $('#startShowDate');

			var endSelectDateDom = $('#endSelectDate');
			var endShowDateDom = $('#endShowDate');

			//DatePicker选择器需要用到的选择器


			// 初始化时间
			var now = new Date();
			var nowYear = now.getFullYear();
			var nowMonth = now.getMonth() + 1;
			var nowDate = now.getDate();
			nowMonth = nowMonth < 10 ? ('0' + nowMonth) : nowMonth;
			nowDate = nowDate < 10 ? ('0' + nowDate) : nowDate;

			startShowDateDom.attr('data-year', nowYear);
			startShowDateDom.attr('data-month', nowMonth);
			startShowDateDom.attr('data-date', nowDate);

			endShowDateDom.attr('data-year', nowYear);
			endShowDateDom.attr('data-month', nowMonth);
			endShowDateDom.attr('data-date', nowDate);

			// 数据初始化
			function formatYear(nowYear) {
				var arr = [];
				for (var i = nowYear - 5; i <= nowYear + 5; i++) {
					arr.push({
						id: i + '',
						value: i + '年'
					});
				}
				return arr;
			}

			function formatMonth() {
				var arr = [];
				for (var i = 1; i <= 12; i++) {
					if (i < 10) {
						i = '0' + i;
					}
					arr.push({
						id: i + '',
						value: i + '月'
					});
				}
				return arr;
			}

			function formatDate(count) {
				var arr = [];
				for (var i = 1; i <= count; i++) {
					if (i < 10) {
						i = '0' + i;
					}
					arr.push({
						id: i + '',
						value: i + '日'
					});
				}
				return arr;
			}
			var yearData = function(callback) {
				callback(formatYear(nowYear))
			}
			var monthData = function(year, callback) {
				callback(formatMonth());
			};
			var dateData = function(year, month, callback) {
				if (/^(01|03|05|07|08|10|12)$/.test(month)) {
					callback(formatDate(31));
				} else if (/^(04|06|09|11)$/.test(month)) {
					callback(formatDate(30));
				} else if (/^02$/.test(month)) {
					if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
						callback(formatDate(29));
					} else {
						callback(formatDate(28));
					}
				} else {
					throw new Error('month is illegal');
				}
			};

			startSelectDateDom.bind('click', function() {
				var oneLevelId = startShowDateDom.attr('data-year');
				var twoLevelId = startShowDateDom.attr('data-month');
				var threeLevelId = startShowDateDom.attr('data-date');
				var fourLevelId = startShowDateDom.attr('data-hour');
				var fiveLevelId = startShowDateDom.attr('data-minute');
				startDateTime(startShowDateDom, oneLevelId, twoLevelId, threeLevelId);

			});
			endSelectDateDom.bind('click', function() {
				var oneLevelId = endShowDateDom.attr('data-year');
				var twoLevelId = endShowDateDom.attr('data-month');
				var threeLevelId = endShowDateDom.attr('data-date');
				var fourLevelId = endShowDateDom.attr('data-hour');
				var fiveLevelId = endShowDateDom.attr('data-minute');
				endDateTime(endShowDateDom, oneLevelId, twoLevelId, threeLevelId);

			});

			var timeNum = 0;

			function startDateTime(ShowDateDom, oneLevelId, twoLevelId, threeLevelId) {
				var iosSelect = new IosSelect(3, [yearData, monthData, dateData], {
					title: '时间选择',
					itemHeight: 35,
					itemShowCount: 7,
					oneLevelId: oneLevelId,
					twoLevelId: twoLevelId,
					threeLevelId: threeLevelId,
					callback: function(selectOneObj, selectTwoObj, selectThreeObj) {
						ShowDateDom.attr('data-year', selectOneObj.id);
						ShowDateDom.attr('data-month', selectTwoObj.id);
						ShowDateDom.attr('data-date', selectThreeObj.id);
						ShowDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
						if (timeNum > 0) {
							SETime();
						}
						/*setTimeout(function() {
							$('.switch_Container').hide();
						}, 10000)*/
					}
				});
			}

			function endDateTime(ShowDateDom, oneLevelId, twoLevelId, threeLevelId) {
				var iosSelect = new IosSelect(3, [yearData, monthData, dateData], {
					title: '时间选择',
					itemHeight: 35,
					itemShowCount: 7,
					oneLevelId: oneLevelId,
					twoLevelId: twoLevelId,
					threeLevelId: threeLevelId,
					callback: function(selectOneObj, selectTwoObj, selectThreeObj) {
						ShowDateDom.attr('data-year', selectOneObj.id);
						ShowDateDom.attr('data-month', selectTwoObj.id);
						ShowDateDom.attr('data-date', selectThreeObj.id);
						ShowDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
						SETime()
						timeNum++;
						/*setTimeout(function() {
							$('.switch_Container').hide();
						}, 10000)*/
					}
				});
			}

			function SETime() {
				if (startShowDateDom.text() == '点击选择开始时间') {
					hui.alert('请选择数据开始时间！！', '好的', function() {
						return false;
					})
					return false;
				}

				if (startShowDateDom.text() != '点击选择开始时间' && endShowDateDom.text() != '点击选择结束时间') {
					var reg = /[\u4e00-\u9fa5]/g;
					var startTime = $('#startShowDate').text();
					var endTime = $('#endShowDate').text();
					startTime = startTime.substring(0, 4) + startTime.substring(6, 8) + startTime.substring(10, 12);
					endTime = endTime.substring(0, 4) + endTime.substring(6, 8) + endTime.substring(10, 12);
					//				alert(startTime+'---'+endTime);
					if (startTime >= endTime) {
						alert('请选择正确的时间格式');
						return false;
					} else if (startTime < endTime) {
						DWMY_url = newBaseUrl() + "/targetdata/gettargetdatabyday?targetcode=" + targetcode + "&daystart=" + startTime +
							"&dayend=" + endTime;
						console.log(DWMY_url);
						refresh(DWMY_url, startTime, endTime, 0);
						hui('.day').addClass('active').siblings('span').removeClass('active');
						$('.switch_Container').hide();
					}

				}

			}



			function data_DB() {
				hui.open('data_Contrast.html', {}, true, {});
			}
			hui('.YMD_more span').click(function() {
				hui(this).addClass('active').siblings('span').removeClass('active');
				$('.switch_Container').hide();
				//hui('.day_Time').css({visibility:'hidden'});
				dataHandle();
			});



			// 选中默认基地
			var isNum = 1; //判断此值  (等于1时，说明从首页进入,需要将select默认选中首页进入此页面的基地)   
			(function Base_default() {
				var detailColumn = JSON.parse(localStorage.getItem('detailColumn'));
				//请求当前基地下面的指标
				if (isNum == 1) {
					getSensorList(detailColumn);
					isNum++;
				}
			})()


			//日月年选择函数
			function dataHandle() {
				//时数据请求
				if (hui('.time').hasClass('active')) {
					starttime = dateFtt("yyyyMMdd", new Date(new Date().getTime() - 50 * 24 * 60 * 60 * 1000)) + "00";
					endtime = dateFtt("yyyyMMdd", new Date()).trim() + "23";
					
					refresh(newBaseUrl() + "/targetdata/gettargetdatabyhour?targetcode=" + targetcode + "&hourstart=" + starttime +
						"&hourend=" + endtime);
				}
				//日数据请求
				if (hui('.day').hasClass('active')) {
					starttime = (new Date().getFullYear() - 1) + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() +
						1) : (new Date().getMonth() + 1)) + String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());
					endtime = new Date().getFullYear() + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() + 1) :
						(new Date().getMonth() + 1)) + String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());
					
					refresh(newBaseUrl() + "/targetdata/gettargetdatabyday?targetcode=" + targetcode + "&daystart=" + starttime +
						"&dayend=" + endtime);
				}
				//周数据请求
				if (hui('.week').hasClass('active')) {
					starttime = (new Date().getFullYear() - 1) + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() +
						1) : (new Date().getMonth() + 1)) + String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());
					endtime = new Date().getFullYear() + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() + 1) :
						(new Date().getMonth() + 1)) + String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());

					refresh(newBaseUrl() + "/targetdata/gettargetdatabyweek?targetcode=" + targetcode + "&weekstart=" + starttime +
						"&weekend=" + endtime);
				}
				//月数据请求
				if (hui('.month').hasClass('active')) {
					starttime = (new Date().getFullYear() - 1) + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() +
						1) : (new Date().getMonth() + 1));
					endtime = new Date().getFullYear() + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() + 1) :
						(new Date().getMonth() + 1));

					refresh(newBaseUrl() + "/targetdata/gettargetdatabymonth?targetcode=" + targetcode + "&monthstart=" + starttime +
						"&monthend=" + endtime);
				}

				//季数据请求
				if (hui('.season').hasClass('active')) {
					starttime = (new Date().getFullYear() - 1) + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() +
						1) : (new Date().getMonth() + 1));
					endtime = new Date().getFullYear() + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() + 1) :
						(new Date().getMonth() + 1));
					
					refresh(newBaseUrl() + "/targetdata/gettargetdatabyquarter?targetcode=" + targetcode + "&quarterstart=" +
						starttime + "&quarterend=" + endtime);
				}
				//年数据请求
				if (hui('.year').hasClass('active')) {
					starttime = new Date().getFullYear() - 1;
					endtime = new Date().getFullYear();
					
					refresh(newBaseUrl() + "/targetdata/gettargetdatabyyear?targetcode=" + targetcode + "&yearstart=" + starttime +
						"&yearend=" + endtime);
				}
			}
			dataHandle();


			//指标数据请求函数
			function getSensorList(column) {
				console.log(column);
				var base_picker = [{
					value: Sensor_Base,
					text: Sensor_Name,
					children: []
				}];
				var url = newBaseUrl() + "/displaydirectory/gettargetnewdatabypowerid?powerid=" + column.powerid;
				$.get(url, function(res) {
					hui.closeLoading();
					var result = res;
					$.each(result.result, function(key, item) {
						$.each(column.collectionTargetList, function(index, value) { //添加指标名称、最新数据
							if (value.targetcode == item.targetCode) {
								item.targetTypeUnit = value.targetTypeUnit
								item.powertargetname = value.powertargetname
							}
						})
						if (item.controlType != 'control' && item.controlType != 'switch') { //筛选picker所需数据
							base_picker[0].children.push({
								value: item.targetCode,
								text: item.powertargetname + item.targetTypeUnit
							});
						}
					})
						
					//初始化picker
					var picker = new huiPicker('#btn_base', function() {
						targetcode = picker.getVal(1);//全局targetcode
						LineNum = 1; //将全局LineNum重置为1，更新折线图
						
						var reg = /[\u4e00-\u9fa5]/g;
						tName = picker.getText(1).match(reg).join("");
						tUnit = picker.getText(1).replace(reg, "");
						hui(".title-txt").html(tName);
						hui('#name_unit').html(tName + '统计');
						hui('#btn_base p').html(picker.getText(0) + ' ' + picker.getText(1));
						hui('.YMD_more .day').addClass('active').siblings('span').removeClass('active');
						
						dataHandle();//picker切换指标重新请求数据
					});
					picker.level = 2;//设置picker为2级联动
					console.log(base_picker);
					picker.bindRelevanceData(base_picker);//绑定存放数据的数组
				})
			}


			var LdataTimes = []; //Echarts图标的时间轴数据
			var L_dataValues = []; //Echarts图标折线图的具体数据

			var dataTimes = []; //Echarts图标的时间轴数据
			var K_dataValues = []; //Echarts图标K线图的具体数据
			//数据请求函数	
			function refresh(timeUrl, starttime, endtime, startValue) {
				//每次请求前，重置存放ECharts数据存放的数组
				LdataTimes = [];
				L_dataValues = [];
				dataTimes = [];
				K_dataValues = [];

				hui.loading("正在获取数据...");
				if (LineNum == 1) {
					var startTime = getTaskTime(new Date().setDate(new Date().getDate() - 50)),
						endTime = String(new Date().getFullYear()) + String((new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() +
							1) : (new Date().getMonth() + 1)) + String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate()) +
						'23';

					lineHandle(newBaseUrl() + "/targetdata/gettargetdatabyhour?targetcode=" + targetcode + "&hourstart=" + startTime +
						"&hourend=" + endTime);
				}
				kineHandle(timeUrl);
			}

			function lineHandle(lineUrl) {
				$.get(lineUrl, function(res) {
					hui.closeLoading();
					var result = res;
					$.each(result.result.data, function(key, item) {
						var dt = item.measuretime.substring(0, 13) + '时';
						LdataTimes.push(dt);
						L_dataValues.push(item.measuredata); //折线图数据
					})
					line_chart();
					LineNum++; //++后之重置K线图   不重置折线图
				})
			}

			function kineHandle(kineUrl) {
				$.get(kineUrl, function(res) {
					hui.closeLoading();
					var result = res;
					$.each(result.result.data, function(key, item) {
						var dt = hui('.time').hasClass('active') ? item.measuretime.substring(0, 13) + '时' : item.measuretime.substring(
							0, 10);
						dataTimes.push(dt);
						K_dataValues.push([item.measurefirstdata, item.measurelastdata, item.measuremindata, item.measuremaxdata]); //K线图数据
					})
					LineNum++; //++后之重置K线图   不重置折线图
					K_chart();
				})
			}


			function getTaskTime(strDate) {
				//获取前七天日期函数
				var date = new Date(strDate);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				//m = m < 10 ? ('0' + m) : m;
				if(m < 10){
					m = ('0' + m)
				}
				var d = date.getDate();
				//d = d < 10 ? ('0' + d) : d;
				if(d < 10){
					d = ('0' + d)
				}
				week = String(y) + String(m) + String(d) + '00';
				return week;
			}

			function line_chart() {
				var option1 = {
					color: '#fd1050',
					title: {
						show: false,
						text: tName + ' ' + tUnit,
						textStyle: {
							color: '#fff',
						}
					},
					tooltip: {
						trigger: 'axis',
						showContent: true,
						confine: true,
						triggerOn: 'mousemove',
						//position:['100%', 2], 
						textStyle: {
							width: '300px',
						},
						axisPointer: {
							//          type: 'cross'	//此属性用来显示XY轴上的集体数据  
						},
						formatter: function(params) {
							//console.log('解析数据:' + JSON.stringify(params));
							//console.log(params[0].seriesName);
							var res = params[0].name;

							if (params[0].seriesName == '风向') {
								res += '<br />';
								res += '' + params[0].seriesName;
								if (params[0].value == null || params[0].value == undefined) {
									res += ' : ' + '-';
								} else {
									res += tUnit + ' : ' + windDirection(params[0].value);
								}
							} else {
								res += '<br />';
								res += '' + params[0].seriesName;
								if (params[0].value == null || params[0].value == undefined) {
									res += ' : ' + '-';
								} else {
									res += tUnit + ' : ' + params[0].value.toFixed(2);
								}

							}
							return res;
						}
					},
					legend: {
						data: tName,
					},
					grid: {
						top: 30,
						bottom: 65,
						right: 20,
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff'
							}
						},
						axisPointer: {

						},
						data: LdataTimes //["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
					}],
					yAxis: [{
						scale: true,
						name: tUnit,
						splitArea: {
							show: false
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ededed'
							}
						},
						axisLine: {
							lineStyle: {
								color: '#677283'
							}
						},
						splitLine: {
							show: true,

						},
					}],
					dataZoom: [{
						show: true,
						showDetail: true,
						realtime: true,
						startValue: 50,
						end: 100,
						handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '100%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						},
					}, ],
					series: [{
						name: tName,
						type: 'line',
						smooth: true,
						data: L_dataValues,
						formatter: function(params) {
							console.log(params);
							if (params.value > 0) {
								return params.value;
							} else {
								return '';
							}
						},
					}],
					animationEasingUpdate: {},
				};
				myChart1 = echarts.init(document.getElementById('chart_L'));
				myChart1.setOption(option1); // 使用刚指定的配置项和数据显示图表。
				myChart1.dispatchAction({ //每次重置data后 重新设置展示窗口的 start end 来解决重置后ECharts画布残留上一次数据的重影
					type: 'dataZoom',
					start: 60,
					end: 100
				});
			}


			// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)

			function K_chart(startValue) {
				var upColor = '#fd1050',
					upBorderColor = '#7d1a3b',
					downColor = '#0cf49b',
					downBorderColor = '#196f56';

				var option2 = {
					title: {
						show: false,
						text: tName + ' ' + tUnit,
						left: 0,
						textStyle: {
							color: '#fff',
						}
					},
					tooltip: {
						trigger: 'axis',
						//						show: false,
						showContent: true,
						axisPointer: {
							//type: 'cross'	//此属性用来显示XY轴上的集体数据  
						},
						formatter: function(params) {
							//							console.log('解析数据:' + JSON.stringify(params));
							var res = params[0].name;
							if (params[0].seriesName == '风向') { //windDirection(num)
								if (params[0].value[1] == undefined || params[0].value[1] == null) {
									res += '<br />';
									res += '开始 : ' + '-';
								} else {
									res += '<br />';
									res += '开始 : ' + windDirection(params[0].value[1]);
								}
								if (params[0].value[2] == undefined || params[0].value[2] == null) {
									res += '<br />';
									res += '结束 : ' + '-';
								} else {
									res += '<br />';
									res += '结束 : ' + windDirection(params[0].value[2]);
								}
								if (params[0].value[3] == undefined || params[0].value[3] == null) {
									res += '<br />';
									res += '最低 : ' + '-';
								} else {
									res += '<br />';
									res += '最低 : ' + windDirection(params[0].value[3]);
								}
								if (params[0].value[4] == undefined || params[0].value[4] == null) {
									res += '<br />';
									res += '最高 : ' + '-';
								} else {
									res += '<br />';
									res += '最高 : ' + windDirection(params[0].value[4]);
								}
							} else {
								for (var i = params.length - 1; i >= 0; i--) {
									if (params[i].value instanceof Array) {
										if (params[i].value[1] == undefined) {
											res += '<br />';
											res += '开始 : ' + '-';
										} else {
											res += '<br />';
											res += '开始 : ' + params[i].value[1].toFixed(2) + tUnit;
										}

										if (params[i].value[2] == undefined || params[i].value[2] == null) {
											res += '<br />';
											res += '结束 : ' + '-';
										} else {
											res += '<br />';
											res += '结束 : ' + params[i].value[2].toFixed(2) + tUnit;
										}
										if (params[i].value[3] == undefined || params[i].value[3] == null) {
											res += '<br />';
											res += '最低 : ' + '-';
										} else {
											res += '<br />';
											res += '最低 : ' + params[i].value[3].toFixed(2) + tUnit;
										}
										if (params[i].value[4] == undefined || params[i].value[4] == null) {
											res += '<br />';
											res += '最高 : ' + '-';
										} else {
											res += '<br />';
											res += '最高 : ' + params[i].value[4].toFixed(2) + tUnit;
										}
									} else {
										res += '<br />';
										res += '' + params[i].seriesName;
										res += ' : ' + params[i].value + tUnit;
									}
								}
							}

							return res;
						}
					},
					legend: {
						data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
					},
					grid: {
						top: 30,
						bottom: 65,
						right: 20,
					},
					xAxis: {
						type: 'category',
						data: dataTimes,
						scale: true,
						boundaryGap: false,
						axisLine: {
							onZero: false,
							lineStyle: {
								color: '#677283'
							},
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ededed'
							}
						},
						splitLine: {
							show: false
						},
						min: 'dataMin',
						max: 'dataMax'
					},
					yAxis: [{
							scale: true,
							name: tUnit,
							splitArea: {
								show: false
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: '#ededed'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#677283'
								}
							},
							splitLine: {
								show: true,

							},
						},
						{
							type: 'value',
							show: false,
							scale: true,
							splitArea: {
								show: true
							},
							name: "单位: " + tUnit //这里是纵轴标题
						}
					],
					dataZoom: [{
						show: true,
						realtime: true,
						start: 80,
						end: 100,
						handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '100%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}, ],
					series: [{ //K线图
						name: tName,
						type: 'candlestick',
						connectNulls: true,
						data: K_dataValues, // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
						itemStyle: {
							normal: {
								color: upColor,
								color0: downColor,
								borderColor: upBorderColor,
								borderColor0: downBorderColor
							}
						},
						markLine: {
							symbol: ['none', 'none'],

						}
					}, ]
				};
				myChart2 = echarts.init(document.getElementById('chart_K'));
				// 使用刚指定的配置项和数据显示图表。
				myChart2.setOption(option2);
			}

			function windDirection(num) {
				var num = parseInt(num)
				var N = '北';
				var E = '东';
				var S = '南';
				var W = '西';
				var dir = '';

				if (num == 0 || num == 360) {
					dir = '正' + N;
				} else if (num < 90 && num > 0) {
					if (num < 45) {
						dir = N + '偏' + E + num + ' °';
					} else if (num == 45) {
						dir = E + N + num + ' °';
					} else if (num > 45) {
						dir = E + '偏' + N + (90 - num) + ' °';
					}
				} else if (num == 90) {
					dir = '正' + E;
				} else if (num < 180 && num > 90) {

					if (num < 135) {
						dir = E + '偏' + S + (num - 90) + ' °';
					} else if (num == 135) {
						dir = E + S + (num - 90) + ' °';
					} else if (num > 135) {
						dir = S + '偏' + E + (180 - num) + ' °';
					}
				} else if (num == 180) {
					dir = '正' + S;
				} else if (num < 270 && num > 180) {

					if (num < 225) {
						dir = S + '偏' + W + (num - 180) + ' °';
					} else if (num == 225) {
						dir = W + S + (num - 180) + ' °';
					} else if (num > 225) {
						dir = W + '偏' + S + (270 - num) + ' °';
					}
				} else if (num == 270) {
					dir = '正' + W;
				} else if (num < 360 && num > 270) {

					if (num < 315) {
						dir = W + '偏' + N + (num - 270) + ' °';
					} else if (num == 315) {
						dir = W + N + (num - 270) + ' °';
					} else if (num > 315) {
						dir = S + '偏' + W + (360 - num) + ' °';
					}
				}
				return dir;

			}



			/*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/
			var timeout;
			var swiper = new Swiper('.swiper-container', {
				noSwiping: true,
				resistanceRatio: 0,
				//loop: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: false,
				},
				on: {
					touchStart: function(event) {
						timeout = setTimeout(function() {
							//		                    console.log('禁止')
							//		                    swiper.allowTouchMove= false;//禁止
						}, 300);
					},
					touchMove: function(event) {
						//你的事件
						//				      	swiper.allowTouchMove= true;//设置
					},
					touchEnd: function(event) {
						//你的事件
						swiper.allowTouchMove = true; //设置
					},
					tap: function() {
						swiper.allowTouchMove = true; //设置
					},
					doubleTap: function(event) {
						swiper.allowTouchMove = true; //设置
					},
					slideChangeTransitionEnd: function() {
						swiper.allowTouchMove = true; //设置
					},
				},
			});
		</script>
	</body>

</html>
